<template>
  <div class="">
    <div style="background-color: #f1f1f1;width: 100%;padding: 13px 0px 10px 0px">
      <div class="titleBox" style="line-height: .3rem">
        <div class="left" style="line-height: 0rem"><span class="now bread" >当前位置: </span></div>
        <div class="left" >
          <el-breadcrumb separator-class="el-icon-arrow-right" >
          <el-breadcrumb-item :to="{ path: '/' }"><span class="bread"> 首页 </span></el-breadcrumb-item>
          <el-breadcrumb-item><span class="bread" style="color: #0062a2"> 新闻列表 </span></el-breadcrumb-item>
        </el-breadcrumb>
        </div>
      </div>
      <div class="cleae"></div>
    </div>
    <div class="cent" :ListData="ListData">
      <div class="listBox clearfix">
        <div class="Box">
          <div class="list" v-for="lis in tableData2" >
            <div class="imgBoxLfet">
              <div class="imgBoxs">
                <img :src="lis.img">
              </div>
            </div>
            <div class="card">
              <p class="title" @click="goChart('newsDitle',lis.id)">{{lis.title}}</p>
              <p class="cop">{{lis.text}}</p>
              <span class="time"> {{lis.createTime}}</span>
            </div>
          </div>
        </div>
        <div class="cleae">
        </div>
      </div>
      <div class="" style="text-align: right">
        <el-pagination layout="prev, pager, next" :page-count="page.count" @current-change="handleCurrentChange">

        </el-pagination>
      </div>
    </div>
  </div>

</template>
<style scoped>
  .titleBox{width:70%;padding:40px 0px 0px 0px;min-width:1000px;max-width: 1200px;margin:auto;text-align: left;height: 30px}
  .titleBox .title{ margin-top:20px;}
  .list .card .title{font-weight: bold;height: 50px;line-height: 50px;font-size: 16px;cursor: pointer}
  .titleBox .bread{font-size:.16rem;font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;font-weight: normal}
  .cent{width:70%;background-color:#fff;padding:20px;min-width:1000px;max-width: 1200px;margin:auto;min-height: 600px;}
  .iocn{padding:4px 8px;background:#e1e1e1;margin-left:10px}
  .now{font-size: 14px; font-weight: bold; position: relative; display: block; width: 80px;height: 14px;line-height: 14px}
  .listBox{padding-top: 20px;}
  .list{ margin-bottom: 40px; }
  .list{overflow: hidden}
  .el-icon-plus{ background-color:#0061a1;color:#fff;margin: 0px 10px;font-size: 12px;padding: 4px 5px}
  .imgBoxLfet{float:left;width: 230px;height:140px;position:relative;font-size:12px;border: 1px solid #e1e1e1  }
  .imgBoxLfet .title{ position:absolute;bottom:0px;max-height: 50px;line-height: 20px;background-color: rgba(0,0,0,0.5);line-height: 20px;text-align: left;padding: 5px;width:210px;color: #fff;}
  .imgBoxLfet  .imgBoxs{width: 100%;max-height:140px;overflow: hidden }
  .imgBoxLfet  .imgBoxs img{width: 100%;}
  .card{position: relative;margin-bottom: 10px;margin-left: 260px;height: 100px}
  .list  .title{ line-height: 25px;text-align: left;overflow: hidden;font-weight: bold;font-size: 16px;}
  .cop{width: 80%;height: 75px;line-height:25px;overflow: hidden;text-align: left;font-size: 14px;color:#909090;padding-top: 10px}
  .time{ position: absolute;top: 5px;right: 20px;font-size: 12px;color: #909090}
</style>
<script>
  import setPublc from '@/components/public/set.vue'
  import HeaderPublc from '@/components/public/herderIndex.vue'
  import Public from '@/vuex/public'
  import {mapState, mapActions} from 'vuex'
  import imgdeift from '../../../../static/img/icon/newsDeft.png'
  // import  Public from "../../../vuex/public";
  export default {
    name: 'my-adminChart',
    data () {
      return {
       page:{
         page:1,
         pageSize: 10,
         count:0
       },
        tableData2:[]
      }
    },
    methods: {
      ...mapActions({
        delUser: 'delUserList',
        showNewsList: 'showNewsList',
        resetPassword: 'resetPassword'
      }),
      // 上下页
      handleCurrentChange (val) {
        this.page.page = parseInt(val)
        this.saechFn()
      },
      login () {
        this.$router.push({ name: 'map' })
      },
      // 列表查询
      goChart(name,id){
        this.$router.push({ name: name,query:{id:this.$route.name,chartID:id}})
      },
      // 搜索
      saechFn(a){
        var parm = {status:1,page:this.page.page,pageSize:this.page.pageSize}
        this.showNewsList(parm)
      },
      // 列表解析
      updateListFn(res){
        if (res.body.count) {
          var cunt = res.body.count
          // 取整
          this.page.count = Math.ceil(cunt / this.page.pageSize)
        }
        res = res.body.data
        this.tableData2 = []
        var time = Public.publicLo.timeCheng()

        for (let i in res) {
          var dom = document.createElement('div')
          dom.innerHTML=res[i].content;
          var text,src = imgdeift
          var domType = ''
          for(let k in  dom.childNodes){
            domType = dom.childNodes[k].nodeName
            if(domType== 'P'|| domType== '#text' ){
              text = dom.childNodes[k].innerText || dom.childNodes[0].textContent
              break
            }
          }
          for(let k in  dom.childNodes){
            domType = dom.childNodes[k].nodeName
            if( domType != '#text') {
              var img = dom.getElementsByTagName('img')
              if(img[0]){
                src = img[0].src
              }
            }
          }
          if(res[i].createTime){
            time = Public.publicLo.timeCheng(res[i].createTime)
          }
          var pu = {
            id: res[i].id,
            title: res[i].title,
            type:res[i].type,
            typeText: res[i].type==1?'普通新闻':'公告',
            creatorId:res[i].creatorId,
            img:src,
            text:text,
            status:res[i].status,
            createTime: time.times,
            statusText: res[i].status==0?'新建': res[i].status==1?'发布':res[i].status==2?'下架':'异常'
          }
          this.tableData2.push(pu)
        }
      },
    },
    computed: {
      ListData: function () {
        var parm = this.updateList
        if (parm) {
          this.updateListFn(parm)
        }
        return 1
      },
      ...mapState([
        'updateList',
        'updateStatus',
        'language',
        'show'
      ])
    },
    mounted () {
      // var width = document.body.clientWidth;
      // var dom = document.getElementById('main');
      // var w = width-240;
      // dom.style = 'max-width:'+ w +'px';
      this.saechFn()
    },
    components: {
      HeaderPublc: HeaderPublc,
      setPublc:setPublc,
    }
  }
</script>

